<template>
  <div class="hi">
    <div class="goodsList">
      <div class="content">
        <div class="good-list-box">
          <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" v-model:error="error" error-text="服务器累了，点击重新加载"
              finished-text="  " offset="500" @load="onLoad" :key="2">
              <van-count-down v-show="false" :time="time" @finish="onFinish">
              </van-count-down>
              <div class="good-list">
                <div class="good-item" v-for="(value, index) in items" :key="index" :sku="value.F_ProductId" :hei="index">
                  <!-- <a class="good-card" :href="'http://www.higuang365.com/wap/product-'+value.F_ProductId+'.html'+($store.state.userInfo.F_Question?'?parents_id='+$store.state.userInfo.F_Question:'')"> -->

                  <div class="good-card" @click="
                    value.F_Number > 0 && !countDown
                      ? $router.push({
                        path: '/product',
                        query: {
                          id: value.F_ProductId,
                          parents_id: username,
                        },
                      })
                      : ''
                    ">
                    <div v-if="value.F_Number - 0 <= 0" class="imgcover">
                      <img src="http://www.higuang365.com/public/images/common/activity/2211activity/sq11.png" />
                    </div>
                    <van-image class="product-img lazy-img" :show-loading="false" lazy-load
                      :src="'http://higuang365.com/' + value.F_pic_url" />
                    <!-- <van-image
                      v-if="countDown"
                      class="product-img lazy-img"
                      :show-loading="false"
                      lazy-load
                      :src="'http://higuang365.com/' + value.F_pic_url"
                    /> -->
                    <!-- v-else-if="!countDown && value.F_Number > 0" -->
                    <!-- <van-image
                      v-else
                      class="product-img lazy-img"
                      :show-loading="false"
                      lazy-load
                      :src="'http://higuang365.com/' + value.F_pic_url"
                    /> -->

                    <div class="good-desc">
                      <div class="title">{{ value.F_Name }}</div>
                      <!-- <div class="county">
                    <img
                      class="county-icon"
                      v-if="value.F_yuliu2"
                      :src="'http://higuang365.com/' + value.F_yuliu2"
                      alt=""
                    />

                    <div class="county-title">
                      {{ value.F_BrandCountrie }}
                    </div>
                  </div> -->
                      <!-- <div class="price-box">
                      <span class="price"
                        >¥ <span>{{ value.F_BdPrice }}</span></span
                      >
                      <span class="estimate">￥{{ value.F_Price }}</span>

                      <span class="timelimit">特惠</span>
                    </div> -->

                      <div class="share" @click.stop="
                        addGoodsCart(value.F_yuliu3, value.F_ProductId)
                        "></div>
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  onActivated,
  onDeactivated,
} from "vue";
// import { GetTagGoodsList } from "@/api/home";
import { GetH11GoodsList } from "@/api/home";
import { getCookie, addGoodsCart } from "@/lib/ecapi";
export default defineComponent({
  name: "peoplebuy",
  setup() {
    const data = reactive({
      items: [],
      deleteproduct: ['4227', '4228', '4229','4236','4237','4238','4239','4240','4241','4242','4243','4244'],
      error: false,
      loading: false,
      finished: false,
      Refresh: false,
      pageNum: 1,
      pageSize: 40,
      username: getCookie("S[MEMBER]"),
      countDown: true,
      // unSellOut:true,
      time:
        new Date(
          `${new Date().getFullYear()}/${new Date().getMonth() + 1}/11 11:00:00`
        ).getTime() - new Date().getTime(),
    });
    const isStock = computed(() =>
      // data.items.some((val: { F_Number: string }) => val.F_Number > "0")
      data.items.some((val) => val.F_Number > "0")
    );
    const onLoad = async () => {
      data.loading = true;
      const res = await GetH11GoodsList({
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        tag_id: "44",
        strlv: getCookie("MLV"),
      });
      // console.log(res);
      if (!res[0]) {
        data.error = true;
        data.loading = false;
        return;
      }
      // 删除满足条件按的id
      res[1] = res[1].filter(item => !data.deleteproduct.includes(item.F_ProductId))
     
      data.items.push(...res[1]);
      data.loading = false;
      data.pageNum += 1;
      if (res[1].length < data.pageSize) {
        data.finished = true;
      }
    };
    const onRefresh = () => {
      data.items = [];
      data.pageNum = 1;
      data.finished = false;
      onLoad();
    };
    let giftBagScroll = 0;
    onActivated(() => {
      if (data.items.length == 0) {
        onLoad();
      }
      document.getElementById("app").scrollTop = giftBagScroll;
    });
    onDeactivated(() => {
      giftBagScroll = document.getElementById("app").scrollTop;
    });
    const onFinish = () => {
      data.countDown = false;
      // onLoad();
    };
    return {
      ...toRefs(data),
      addGoodsCart,
      onLoad,
      onRefresh,
      isStock,
      onFinish,
    };
  },
});
</script>

<style lang="scss" scoped>
.content {
  padding: 0 1rem 3rem;

  // background: #fff0d9;
  .good-list-box {
    position: relative;
    margin-top: 0.5rem;

    .good-list {
      // position: absolute;

      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      width: calc(100vw-2rem);
      margin: auto;
    }

    .good-item {
      box-sizing: border-box;
      width: calc(50vw - 2rem);
      margin: 0.5rem;
      // background: rgba(255, 255, 255, 1);
      background: url(http://www.higuang365.com/public/images/common/activity/2212activity/cp11.png);
      background-size: cover;
      border-radius: 1rem;
      overflow: hidden;
      animation: jello-horizontal 1s both;
      box-shadow: 1px 1px 2px #f5f4f4;

      .good-card {
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;

        .imgcover {
          width: 100%;
          height: 100%;
          position: absolute;
          z-index: 100;
        }
      }

      .product-img {
        display: block;
        min-width: calc(50vw - 2rem);
        width: calc(50vw - 2rem);
        height: calc(50vw - 2rem);
        border-radius: 1rem 1rem 0 0;
        overflow: hidden;
      }

      .good-desc {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        flex-grow: 1;
        text-align: left;
        font-size: 1.2rem;
        padding: 0.65rem 1rem 0.05rem;
        position: relative;
        height: 3.5rem;
        font-weight: bold;
        color: #9c0001;

        .title {
          letter-spacing: 0.19rem !important;
          font-size: 1.35rem !important;
        }

        .county {
          display: flex;

          .county-icon {
            width: 2rem;
            height: 100%;
          }

          .county-title {
            color: #999;
            margin-left: 0.5rem;
          }
        }

        .title {
          font-size: 1.3rem;
          // height: 3.2rem;
          line-height: 1.5rem;
          letter-spacing: 0.5px;

          // color: #222333;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .price-box {
          background: url("http://higuang365.com/public/images/common/promotion/price.webp") no-repeat;
          background-size: contain;
          padding: 0 1rem;
          margin: 1rem 0 0;
        }

        .price {
          font-size: 1.3rem;
          // color: #ff0036;
          color: #fff;
          font-weight: bold;
          line-height: 2.5rem;

          span {
            font-size: 1.7rem;
          }
        }

        .timelimit {
          float: right;
          line-height: 2.6rem;
          color: #050505;
        }

        .share {
          height: 2.5rem;
          width: 2.5rem;
          position: absolute;
          right: 1rem;
          bottom: 1rem;
          z-index: 10;
          background-color: #ff1f10;
          background-image: none;
          mask: url(//storage.360buyimg.com/tower/babelnode/static/media/i-miaosha-red.e6c30bae.png) no-repeat;
          mask-size: 100% 100%;
          display: none;
        }

        .estimate {
          color: #c5c5c5;
          text-decoration: line-through;
          margin-left: 0.5rem;
        }
      }
    }
  }
}
</style>
